<template>
  <div class="header-setting">
    <wallet-title :title="searchTitle" />
    <l-text-rarrow class="setting-info" text="个人信息" icon2="arrow" @click.native="routerSettingDetails" />
    <l-text-rarrow class="setting-safe" text="账户与安全" icon2="arrow" />
    <l-text-rarrow class="setting-elder" text="长辈模式" distance="未开启" icon2="arrow" />
    <l-text-rarrow class="setting-message" text="新消息通知" icon2="arrow" />
    <l-text-rarrow class="setting-contacts" text="紧急联系人" icon2="arrow" />
    <l-text-rarrow class="setting-skin" text="换肤中心" icon2="arrow" />
    <l-text-rarrow class="setting-contact" text="联系我们" icon2="arrow" />
    <l-text-rarrow class="setting-version" text="版本号V1.0.0" distance="检查新版本" icon2="arrow" />
    <l-text-rarrow class="setting-about" text="关于我们" icon2="arrow" />
    <div class="login-to-others">
      <div @click="$router.push('/')">登录其他账号</div>
    </div>
    <div class="logout">
      <div @click="logOut">退出登录</div>
    </div>
  </div>
</template>
<script>
import LTextRarrow from '../../components/common/LTextRarrow.vue'
import WalletTitle from '../../components/common/WalletTitle.vue'
export default {
  components: { WalletTitle, LTextRarrow },
  data() {
    return {
      searchTitle: '设置'
    }
  },
  methods: {
    routerSettingDetails() {
      this.$router.push('/setting/settingdetails');
    },
    logOut() {
      // 退出登录
      this.$cookie.delete('username');
      this.$cookie.delete('password');
      this.$cookie.delete('userId');
      this.$router.push('/');
    }
  }
}
</script>

<style lang="scss" scoped>
.header-setting {
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-size: 14px;
  .wallet-title {
    border-bottom: 12px solid $bgcolor;
  }
  // 个人信息
  .setting-info {
    border-bottom: 1px solid $bgcolor;
    display: flex;
    align-items: center;
  }
  // 账户与安全
  .setting-safe {
    border: none;
  }
  .setting-elder, .setting-contact, .setting-about {
    border-bottom: 10px solid $bgcolor;
    display: flex;
    align-items: center;
    height: $height*2;
  }
  .setting-elder {
     border-top: 10px solid $bgcolor;
  }
  // 新消息通知
  .setting-message, .setting-contacts, .setting-skin, .setting-version {
    border-bottom: 1px solid $bgcolor;
  }
  .setting-contact, .setting-about {
    height: $height*1.75;
  }

  // 登录其他账号
  .login-to-others, .logout {
    width: 100%;
    div {
      width: 100%;
      height: $height*1.5;
      line-height: $height*1.5;
      text-align: center;
      font-size: 14px;
      border-bottom: 8px solid $bgcolor;
    }
  }
  .logout {
    div {
      color: $color;
      font-weight: 700;
    }
  }
}
</style>